<template>
	<s-layout title="积分签到" navbar="normal"  color='#333333'>
		<template v-if="state.data">
			<view class="info ss-flex justify-center align-center ss-p-x-30 box-b">
				<view class="tips ss-p-t-86 ss-p-x-32 box-b">
					<view class="title">已连续签到 <text>{{state.data.list.length}}</text> 天，签到七天可获得 <text>+5</text> 积分
					</view>
					<view class="ss-flex ss-m-t-34 justify-between align-center">
						<view class="ss-flex align-center">
							<image class="gold ss-m-r-10"
								src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/sign-gold.png"></image>
							<view class="num ss-m-r-10">{{state.data.user_score}}</view>
							<view class="today">今日+3</view>
						</view>
						<view style="width: 200rpx;height: 50rpx;" @click="go"></view>
					</view>
				</view>
			</view>
			<view class="calendar ">
				<view class="top ss-flex ss-p-x-20 justify-between align-center box-b">
					<view class="ss-flex" style="opacity: 0;">
						<view class="record ss-font-20">积分记录</view>
						<uni-icons type="right" size="20" color="#fff"></uni-icons>
					</view>
					<view class="ss-font-32 title" style="color: #fff;">{{state.title_time}}</view>
					<view class="ss-flex" @click="jump">
						<view class="record ss-font-20">积分记录</view>
						<uni-icons type="right" size="16" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="week-list ss-flex">
					<view class="week-item" v-for="(item,index) in week" :key="index">{{item}}</view>
				</view>
				<view class="today-list ss-flex flex-wrap">
					<template v-for="(item,index) in state.timestamps" :key="index">
						<view class="today-item"  v-if="item.show" @click="changeSign(item,index)">
							<!-- <image class="today-bg"
								:src="item.is_today !== 1 ? 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/sign-date-bg-orange.png' : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/sign-date-bg-orange2.png'" v-if="item.is_sign === 1">
							</image> -->
							<view :class="['date font-1',{'today':item.is_today == 1}]" :style="{color:item.is_today === 1 ? '#FFF' : item.is_today !== -1 ? '#000000' : '#767676'}">{{item.time_text}}</view>
						</view>
						<view class="today-item" v-else>
						</view>
					</template>
					
				</view>
			</view>
			<view class="headline ss-m-t-54">
				积分商城
			</view>
			<view class="score-list ss-flex justify-between flex-wrap ss-m-t-10 ss-safe-bottom">
				<view class="score-item ss-m-b-20 ss-p-10" v-for="(item,index) in state.list" :key="index" @click="sheep.$router.go('/pages/goods/score', { id: item.id })">
					<view class="score-image">
						<image :src="sheep.$url.cdn(item.image)"></image>
					</view>
					<view class="score-name ss-m-t-5">
						{{ item.title }}
					</view>
					<view class="score-price ss-flex jusyify-start align-center ss-m-t-5">
						<view class="price">{{ Number(item.price[0]) > 0 ? '￥' + item.price[0] + '+' : '' }}</view>
						<view class="reward ss-flex justify-center align-center">
							<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/score-gold.png"></image>
							<view>{{ item.score }}</view>
						</view>
					</view>
					<view class="score-btn ss-flex justify-between align-center ss-m-t-18">
						<view class="left">已售{{item.sales}}<text class="ss-m-x-10">|</text>库存{{item.stock}}</view>
						<view class="right">去兑换</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
			    contentdown: '上拉加载更多',
			  }" @tap="loadmore" />
			<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
				paddingTop="10"
				icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据"></s-empty>
		</template>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const template = computed(() => sheep.$store('app').template?.home);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	import dayjs from 'dayjs'

	const week = ref([
		'周日',
		'周一',
		'周二',
		'周三',
		'周四',
		'周五',
		'周六',
	])

	const state = reactive({
		data: {
			list:[]
		},
		title_time: '',
		timestamps:[],
		page:1,
		list:[],
		loadStatus:'',
		total:1,
		type:1
	})

	onLoad(async (options) => {
		if (options && options.type) {
			state.type = Number(options.type)
		}
		if (!userInfo.value.is_signin) {
			const {error,data} = await sheep.$api.point.signUp()
		}
		await getData()
		create_time()
		getScore()
	})
	
	onReachBottom(()=>{
		loadmore()
	})
	
	
	const go = () => {
		if (state.type === 2) {
			sheep.$router.go('/pages/point/index');
		} else {
			uni.navigateBack()
		}
	}
	
	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getScore()
		}
	}
	
	const getScore = async () => {
		state.loadStatus = 'loading'
		const {error,data} = await sheep.$api.app.scoreShop.list({
		  list_rows:10,
		  page:state.page,
		});
		if (error === 0) {
			state.total = data.total
			state.list = state.list.concat(data.data)
			if (state.list.length === 0) {
				state.loadStatus = 'noMore';
			}
			if (data.current_page < data.last_page) {
			  state.loadStatus = 'more';
			} else {
			  state.loadStatus = 'noMore';
			}
		}
	}


	const jump = () => {
		sheep.$router.go('/pages/point/record');
	}
	
	const create_time = () => {
		state.title_time = dayjs().format('YYYY.M')
		const timestamps = createTimeList()
		const firstDayOfMonth = dayjs().startOf('month');
		const weekdayIndex = firstDayOfMonth.day();
		for (let i = 0; i < weekdayIndex; i++) {
			timestamps.unshift({
				show: false
			})
		}
		console.log('timestamps',timestamps)
		state.timestamps = timestamps
	}

	const createTimeList = () => {
		let currentDate = dayjs().startOf('month');
		const timestamps = [];
		// 今天的时间戳
		let today = dayjs(dayjs().format('YYYY-MM-DD 00:00:00')).unix()
		let index = 1
		while (currentDate.format('M') === dayjs().format('M')) {
			let timeStamp = currentDate.valueOf() / 1000;
			let obj = {
				timeStamp,
				// timeStamp时间戳 大于今日的时间戳 说明是未来时间，等于是今日 小于是过去
				is_today: timeStamp > today ? -1 : timeStamp === today ? 1 : 0,
				is_sign: state.data.list.includes(timeStamp) ? 1 : 0,
				time: dayjs(timeStamp * 1000).format('YYYY-MM-DD HH:mm:ss'),
				time_text:index,
				show: true
			}
			timestamps.push(obj)
			index++
			currentDate = currentDate.add(1, 'day');
		}
		return timestamps
	}

	const getData = async () => {
		const {
			error,
			data
		} = await sheep.$api.point.signData()
		if (error === 0) {
			state.data = data
		}
	}
</script>

<style lang="scss" scoped>
	.box-b {
		box-sizing: border-box;
	}

	.info {
		width: 100%;
		height: 340rpx;
		background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/bg-orange.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.tips {
			width: 686rpx;
			height: 244rpx;
			background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/sign-bg2.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			
			.title {
				font-family: PingFang SC;
				font-size: 24rpx;
				color: #FFFFFF;

				text {
					color: #F0F915;
				}
			}

			.gold {
				width: 50rpx;
				height: 50rpx;
			}

			.num {
				font-size: 60rpx;
				font-weight: 600;
				color: #FFFFFF;
			}

			.today {
				font-family: PingFang SC;
				font-size: 24rpx;
				color: #F0F915;
				font-weight: 500;
			}
		}
	}

	.calendar {
		width: 690rpx;
		margin: 0 auto;
		border-radius: 10rpx 10rpx 0 0;
		border: 2rpx solid #BCBCBC;
		background-color: var(--ui-BG-6);

		.top {
			width: 100%;
			height: 72rpx;
			border-radius: 10rpx 10rpx 0 0;
			background: #f0a66f;

			.title {
				font-weight: 600;
			}

			.record {
				color: #FFFFFF;
				transform: translateY(-2rpx);
			}
		}

		.week-item {
			width: 98rpx;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			color: #3D3D3D;
		}
		.today-list{
			box-sizing: content-box;
		}
		.today-item {
			width: 98rpx;
			height: 90rpx;
			font-family: PingFang SC;
			font-size: 20rpx;
			line-height: 90rpx;
			text-align: center;
			position: relative;

			.date {
				width: 98rpx;
				position: relative;
				z-index: 9;
				color: #767676;
			}
			.today{
				background-color: #FFA253;
				border-radius: 100rpx;
			}

			.today-bg {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				top: 5rpx;
				left: 16rpx;
			}
		}
	}

	.headline {
		width: 100%;
		height: 60rpx;
		background: var(--ui-BG-6);
		// font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 60rpx;
		color: #3D3D3D;
		padding-left: 30rpx;
	}
	
	.score-item {
		width: 372rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		
		.score-image {
			width: 352rpx;
			height: 381rpx;
			border-radius: 20rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		
		.score-name {
			width: 100%;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: normal;
			color: #212121;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.score-price {
			
			.price {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: normal;
				color: #FE6A00;
			}
			
			.reward {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: normal;
				color: #FE6A00;
				
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right:4rpx;
				}
			}
		}
		
		.score-btn {
			.left {
				font-family: PingFang SC;
				font-size: 20rpx;
				font-weight: normal;
				color: #D8D8D8;
			}
			
			.right {
				width: 150rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background: #FE6A00;
				font-family: 思源黑体;
				font-size: 20rpx;
				font-weight: normal;
				line-height: 50rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>